@charset "utf-8";
body, div, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, iframe, input, textarea, select, label, article, aside, footer, header, menu, nav, section, time, audio, video {
  margin: 0;
  padding: 0;
}

article, aside, footer, header, hgroup, nav, section, audio, canvas, video {
  display: block;
}

body {
  height: 100%;
  position: relative;
  font-family: Helvetica, STHeiti, Droid Sans Fallback;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  color: #000;
  font-size: 17px;
}

html {
  height: 100%;
  max-width: 750px;
  margin: 0 auto;
}

textarea {
  resize: none;
}

iframe, img {
  border: 0;
}

ul, ol {
  list-style: none;
}

input, select, textarea {
  outline: 0;
  -webkit-user-modify: read-write-plaintext-only;
}

a {
  text-decoration: none;
  color: #fff;
}

h1, h2, h3, h4 {
  font-weight: 100;
}

.clearfix:after {
  content: "\200B";
  display: block;
  height: 0;
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.ipt_sty {
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}

.flex {
  display: box;
  box-align: center;
  box-pack: justify;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: justify;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #999;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #999;
}

input {
  outline: none;
  border: 0;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

body {
  width: 100%;
  max-width: 750px;
  height: 100%;
  overflow: hidden;
}

.scene-start {
  width: 100%;
  height: 100%;
  background: url('../img/bg.png') center center no-repeat;
  background-size: auto 100%;
  position: relative;
  .start-btn {
    width: 200px;
    height: 60px;
    background: url('../img/start_btn.png') center center no-repeat;
    background-size: auto 100%;
    position: absolute;
    bottom: 82px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.scene-con {
  width: 100%;
  height: 100%;
  position: relative;
  display:none;
  .scene-room{
    width:100%;
    height:100%;
    background:url('../img/bg/1.jpg') center center no-repeat;
    background-size: 100%;
    position:relative;
    .person{
      width:225px;
      position:absolute;
      height:415px;
      left:50%;
      
      .body-common{
        position: absolute;
        img{
          width:100%;
        }
      }
      .top{
        top:0;
        z-index:3;
      }

    }
  }
  .scene-tool {
    width: 100%;
    position: absolute;
    bottom: 0;
    color: #fff;
    z-index:2;
    .scene-tool-tab {
      .tool-nav-option {
        float: left;
        width: 25%;
        padding: 20px 0;
      }
      .tool-nav-option:nth-child(1) {
        background: url('../img/person_icon.png') center center no-repeat;
        background-color: #ebeff8;
        background-size: auto 22px;
      }
      .tool-nav-option:nth-child(2) {
        background: url('../img/car_icon.png') center center no-repeat;
        background-color: #ebeff8;
        background-size: auto 22px;
      }
      .tool-nav-option:nth-child(3) {
        background: url('../img/decrote-icon.png') center center no-repeat;
        background-color: #ebeff8;
        background-size: auto 22px;
      }
      .tool-nav-option:nth-child(4) {
        background: url('../img/bg_icon.png') center center no-repeat;
        background-color: #ebeff8;
        background-size: auto 22px;
      }
      .tool-nav-option.active {
        background-color: #f4f7fe;
      }
    }
    .tool-option-cons {
      background-color: #fff;
      .tool-option-con {
        height: 100%;
        display: none;
      }
      .tool-option-con.active {
        display: block;
      }
      .tool-option-style {
        ul {
          li {
            width: 20%;
            float: left;
            padding: 2.5%;
            img {
              width: 100%;
              height: auto;

            }

          }
        }
      }
      .tool-option-person {
        height: 100%;
        .person-icon {
          width: 100%;
          padding: 30px 0;
          li {
            float: left;
            width: 50%;
            height: 140px;
          }
          li:nth-child(1) {
            background: url('../img/person/man.png') center center no-repeat;
            background-size: auto 100%;
          }
          li:nth-child(2) {
            background: url('../img/person/woman.png') center center no-repeat;
            background-size: auto 100%;
          }
        }
        .person-set{
          height:200px;
          width:100%;
          display: none;
          .set-nav{
            width:50px;
            float:left;
            color:#333;
            li{
              text-align: center;
              background-color: #ebeff8;
              font-size: 14px;
              height:50px;
              line-height:50px;
            }
            li.active{
              background-color:#f4f7fe;
            }
          }
          .set-con{
            width:calc(100% - 50px);
            margin-left:50px;
            height: 200px;
            overflow: auto;
            .common-set{
              .common-set-con{
                display:none;
                ul{
                  li{
                    float:left;
                    width:50%;
                    img{
                      width: 80%;
                      height: auto;
                      margin: 0 10%;
                    }
                  }
                }
              }
              .common-set-con.active{
                display:block;
              }
            }
          }
        }

      }
    }
  }
}

